<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome Advanced Video Usage Example</title>
    <script type="module" src="../../dist/index.js"></script>
    <style>
      .examples {
        margin-top: 20px;
      }

      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-controller:not([audio]) {
        display: block;         /* expands the container if preload=none */
        max-width: 720px;       /* allows the container to shrink if small */
        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
      }

      video {
        width: 100%;      /* prevents video to expand beyond its container */
      }

      media-airplay-button[mediaairplayunavailable] {
        display: none;
      }

      media-volume-range[mediavolumeunavailable] {
        display: none;
      }

      media-pip-button[mediapipunavailable] {
        display: none;
      }

      #states-list {
        margin-left: 10px;
        table-layout: fixed;
      }

      #states-list td,
      th {
        border: 1px solid;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      #states-list :is(td.attr-name, td.event-type) {
        font-weight: bold;
      }

      .player-states {
        display: flex;
        align-items: start;
      }

      .player-states > * {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Media Chrome Advanced Video Usage Example</h1>
      <section class="player-states">
        <media-controller defaultsubtitles>
          <video
            slot="media"
            src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
            preload="none"
            muted
            crossorigin
            playsinline
          >
            <track
              label="thumbnails"
              default
              kind="metadata"
              src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
            />
            <track
              label="English"
              kind="captions"
              srclang="en"
              src="./vtt/en-cc.vtt"
            />
          </video>
          <media-poster-image
            slot="poster"
            src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.jpg"
            placeholdersrc=""
          ></media-poster-image>
          <div slot="centered-chrome" noautohide>
            <media-loading-indicator></media-loading-indicator>
          </div>
          <media-control-bar>
            <media-play-button></media-play-button>
            <media-seek-backward-button
              seekoffset="15"
            ></media-seek-backward-button>
            <media-seek-forward-button
              seekoffset="15"
            ></media-seek-forward-button>
            <media-mute-button></media-mute-button>
            <media-volume-range></media-volume-range>
            <media-time-range></media-time-range>
            <media-time-display showduration remaining></media-time-display>
            <media-captions-button></media-captions-button>
            <media-playback-rate-button></media-playback-rate-button>
            <media-pip-button></media-pip-button>
            <media-fullscreen-button></media-fullscreen-button>
            <media-airplay-button></media-airplay-button>
          </media-control-bar>
        </media-controller>
        <table id="states-list">
          <tr>
            <th>Attribute Name</th>
            <th>State Value</th>
            <th>Event Type</th>
          </tr>
        </table>
      </section>
      <div class="examples">
        <a href="./">View more examples</a>
      </div>
      <script type="module">
        import { constants } from '../../dist/index.js';

        const { MediaStateChangeEvents, StateChangeEventToAttributeMap } =
          constants;

        const mediaControllerEl = document.querySelector('media-controller');
        const statesTableEl = document.querySelector('#states-list');

        const stateChangeEventTypes = Object.values(MediaStateChangeEvents);
        stateChangeEventTypes.forEach((eventType) => {
          const attrName = StateChangeEventToAttributeMap[eventType];
          const attrState = mediaControllerEl.getAttribute(attrName);

          const stateRowEl = document.createElement('tr');
          stateRowEl.id = eventType;

          const nameEl = document.createElement('td');
          nameEl.classList.add('attr-name');
          nameEl.innerText = `${attrName}`;

          const stateEl = document.createElement('td');
          stateEl.classList.add('attr-state');
          stateEl.innerText = `${attrState}`;

          const evtTypeEl = document.createElement('td');
          evtTypeEl.classList.add('event-type');
          evtTypeEl.innerText = `${eventType}`;

          stateRowEl.appendChild(nameEl);
          stateRowEl.appendChild(stateEl);
          stateRowEl.appendChild(evtTypeEl);
          statesTableEl.appendChild(stateRowEl);

          mediaControllerEl.addEventListener(
            eventType,
            ({ detail: attrState }) => {
              stateEl.innerText = `${attrState}`;
            }
          );
        });
      </script>
    </main>
  </body>
</html>
